<template >
  <div class="main">
    <div class="container">
      <Usercenter class="userinfo"></Usercenter>
      <div class="list">
        <payform
          style="z-index: 9999"
          v-if="showPay"
          @closeDialog="closeDialog"
          :description="''"
          :mtips="'开通vip，解锁更多特权'"
        ></payform>
      </div>
    </div>
  </div>
</template>

<script>
import Usercenter from "@/components/usercenter.vue";
import payform from "@/components/paycomp.vue";

export default {
  data() {
    return {
      showPay: true,
    };
  },
  components: { Usercenter, payform },
  head() {
    return {
      title: "个人中心",
    };
  },
  methods: {
    closeDialog() {
      this.showPay = false;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}

.container {
  width: 100%;
  max-width: 1250px;

  display: flex;
}

.userinfo {
  width: 260px;
  background: white;
  margin-right: 20px;
}

.list {
  width: calc(100% - 280px);
  background: white;
}
</style>